<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-list</title>
    <script type="text/javascript" src="vue.js"></script>
  </head>
  <body>

  <div id="vue-list">
    <ol >
      <li v-for="item in items">{{item.message}}</li>
    </ol>

    <ul >
      <li v-for="( item, index )  in items">{{item.message}}---index: {{index}}--------{{veryDeepObj.level1.level2.level3.level4}}-</li>
    </ul>

  </div>
  <script type="text/javascript">
    var vueList = new Vue({
      el: '#vue-list',
      data:{
        veryDeepObj:{
          level1:{
            level2:{
              level3:{
                level4:'I am in level 4~~~'
              }
            }
          }
        },
        items:[
          {message: 'Foo'},
          {message: 'Objj '},
          {message: 'Foo3 VBar'}
        ]

      }
    });
  </script>

  <div class="object-v-for">
    <ul>
      <li v-for="value in object">{{value}}</li>
    </ul>
    <ul>
      <li v-for="( value, key) in object">{{key}} : {{value}}</li>
    </ul>

    <h3>整数迭代</h3>
    <div>
      <span v-for="n in 10">{{ n }}，</span>
    </div>

  </div>
  <script type="text/javascript">
    var vForObject = new Vue({
      el:'.object-v-for',
      data: {
        object:{
          key1: 'key one',
          key2: 'key two'
        }
      }
    });
  </script>

  <div class="listObject">
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    var demo = {
      list: ['a', 'b', 'c'],
      'a':{
        text:'I am one'
      },
      'b':{
        text:'I am two'
      },
      'c':{
        text:'I am three'
      }
    };

    var demoObject = new Vue({
      el: '.listObject',
      data:demo
    });
  </script>


  <div class="testt">
    <ol>
      <li class="item"
        v-for="item in list"
        :id="item.id"
        :type="type"
        @click="itemClick"
      >
      <div class="fl">
      <span v-if="type === 'quiz'">{{item.index}} </span>
      <span v-else-if="type === 'student'">
        <img class="avatar"  />
      </span>
      <span class="name"> {{item.name}}</span>
      </div>
      <div class="fr">
        <span>{{correctStatus(item)}}</span>
      </div>
      </li>
    </ol>
  </div>
  <script type="text/javascript">
    var demoData = {
      type:'quiz',
      list:[
        {
          id: '1111',
          name:'blackk',
          index:2,
          'noCorrect':3,
          total:22
        }
        ,{
          id: '1112',
          name:'seconed quiz',
          index:5,
          'noCorrect':15,
          total:32
        }
      ]
    };

    var demoVm = new Vue({
      el: '.testt',
      data: demoData,
      computed: {

      },
      methods: {
        itemClick: function(){
          console.log('aaaa')
        },
        correctStatus: function(item){
          if(item['noCorrect'] <= 0){
            return '全部批完'
          } else if (item['noCorrect'] < item.total ){
            return '' + item['noCorrect'] + '人未批'
          } else {
            return '全部未批'
          }
        }
      }
    });
  </script>
  </body>
</html>
